<template>
  <div class="search-popup">
    <!-- 搜索栏 -->
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <!-- 底下三个组件 -->
    <HistoryHot
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @hdTagClick="hdTagClick"
      v-if="blockShow == 1"
    />

    <SearchTipsList
      :tips="tips"
      @cellClick="hdTagClick" 
      v-if="blockShow == 2" />
      
    <SearchProductList
      :productsList="productsList"
      :filterCategory="filterCategory"
      @hdCateChange="hdCateChange"
      @hdPriceChange="hdPriceChange"
      v-if="blockShow == 3"
    />
  </div>
</template>

<script>
// 请求api相关
import { getHishotData, searchTips, searchGoods } from "@/request/searchApi.js";

// vuex相关
import { mapMutations } from "vuex";

// 组件相关
import HistoryHot from "@/components/search/HistoryHot";
import SearchTipsList from "@/components/search/SearchTipsList";
import SearchProductList from "@/components/search/SearchProductList";
export default {
  name: "",
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  props: {},
  data() {
    return {
      // 输入框的值
      searchVal: "",
      // 搜索框的提示热词
      placeVal: "请输入搜索关键词",
      // 控制展示底部哪个组件
      // 1 是历史和热门界面  2 是搜素提示列表  3是搜素产品列表
      blockShow: 1,
      // 历史搜索关键字数据
      historyKeywordList: [],
      // 热门搜索关键字数据
      hotKeywordList: [],
      // 搜素提示列表
      tips: [],
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // sort 可以是 商品id或商品price 排序方式
      sort: "id",
      // 分类id
      categoryId:0,
      // 商品筛选数据
      filterCategory: [],
      // 搜索产品列表数据
      productsList: [],
      // 用于输入时搜索商品 的防抖定时器
      timer: null
    };
  },
  methods: {
    ...mapMutations({
      chanIsShowShadow: "showShadow/chanIsShowShadow",
    }),
    // 点击取消按钮
    onCancel() {
      // 返回上一页
      this.$router.go(-1);
      // 遮掩层取消
      this.chanIsShowShadow(false);
    },
    // 用户正在输入的时候 -- 根据关键字 搜索 提示内容列表
    onInput(val) {
      if(this.timer){
        clearTimeout(this.timer)
      }

      this.timer = setTimeout(()=>{

        this.blockShow = 2;

        searchTips({ keyword: val }).then((res) => {
          this.tips = res.data;
        });

      },500)

      
    },
    // 搜索商品方法抽取
    handleSearchGoods(){
      searchGoods({
        keyword: this.searchVal,
        order:this.order,
        sort:this.sort,
        categoryId:this.categoryId
      }).then(res => {
        let { data, filterCategory } = res.data;
        this.productsList = data;

        this.filterCategory = filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
      });
    },
    // 用户输入内容后回车 然后搜索
    onSearch() {
      // 组件切换
      this.blockShow = 3
      // 每次回车都要重置一下
      this.order = "desc"
      this.sort = "id"
      this.categoryId = 0
      this.handleSearchGoods()
    },
    // 商品列表中分类改变 然后搜索
    hdCateChange(val){
      this.categoryId = val
      this.handleSearchGoods()
    },
    // 商品列表中价格排序改变 然后搜索
    hdPriceChange(val){  
      this.sort = 'price' //根据哪个排序也要更改  
      this.order = val
      this.handleSearchGoods()
    },
    // 热门搜索中的tag点击事件
    hdTagClick(item){
      this.searchVal = item
      this.blockShow = 3
      this.handleSearchGoods()
    }
  },
  created() {
    getHishotData().then((res) => {
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.placeVal = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
  mounted() {},
  computed: {},
};
</script>

<style scoped lang="less">
.search-popup {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efefef;
  z-index: 2;
}
</style>